<template>
  <div class="perDepart">
    <!-- -->
    <div>
      <el-input v-model="keyword" class="mysearch" placeholder="输入全体员工姓名搜索" prefix-icon="search" @input="toSearch" />
      <el-tree
        :data="treeData"
        :highlight-current="true"
        :default-expand-all="true"
        :check-on-click-node="true"
        @node-click="toSend"
      >

        <template slot-scope="{node,data}">
          <div>
            <span>{{ data.name }}</span>
          </div>
        </template>

      </el-tree>

    </div>
  </div>
</template>

<script>
import { getDepartmentApi } from '@/api/personnel'
import { toTree } from '@/utils/index'
export default {
  name: 'VueHrimPersonDepart',

  data() {
    return {
      treeData: [],
      keyword: ''
    }
  },
  created() {
    this.getDepart()
  },
  mounted() {

  },

  methods: {
    toSend(data) { // 点击树形菜单
      //    // 用eventBus 进行兄弟组件传值 传送部门id
      this.$bus.$emit('sendid', data.id)
    },
    toSearch() { // 输入框搜索条件
      // 用eventBus 进行兄弟组件传值
      this.$bus.$emit('sendkeyword', this.keyword)
    },
    async getDepart() { // 获取部门列表 树型数据
      const res = await getDepartmentApi()
      console.log(res, '----------------')
      this.treeData = toTree(res) // 用树形数据处理插件
    }
  }
}
</script>
<style lang="scss" scoped>
.mysearch{
  margin:20px auto;
}
  .perDepart{
    width:280px;
    padding:0 10px;
    box-sizing: border-box;
  }
   .el-tree ::v-deep .el-tree-node__content {
    height: 50px;
    line-height: 50px;
        &:hover{
            color:blue;
        }
  }
</style>
